import React, { Component } from 'react';
import { Dimensions } from 'react-native';
import ImagePanZoom from 'react-native-image-pan-zoom';

import {
    StyleSheet,
    Text,
    View,
    StatusBar,
    Image,
    ScrollView,
    TouchableHighlight,
    TouchableOpacity,
    SafeAreaView,
    Modal,
    Platform
} from 'react-native';
import StatusBarSelf from '../StatusBarSelf';
import FastImage from 'react-native-fast-image';
import Constant from '../../utils/Constant'

const isIos = Platform.OS == 'ios';

let screenW = Dimensions.get('window').width;
let screenH = Dimensions.get('window').height;

export default class ChatImagePriver extends Component {

    constructor(props) {
        super(props)
        this.state = {
            imageUrl: this.props.imageUrl,
            imageSize: this.props.imageSize,
        }
    }

    render() {
        console.log('imageUrl=', this.state.imageUrl);
        console.log('statusBarHeight',Constant.statusBarHeight)
        return (
            <View style={styles.container}>
                {/* <StatusBarSelf color={'#000'} /> */}
                <ImagePanZoom
                    cropWidth={screenW}
                    cropHeight={screenH+(isIos ? 0 : Constant.statusBarHeight)}
                    imageWidth={screenW} // 根据需要调整，确保图片宽度大于或等于cropWidth
                    imageHeight={(screenW / this.state.imageSize.width) * this.state.imageSize.height} // 超长图片的高度
                    panToMove={true}
                    pinchToZoom={true}
                    enableDoubleClickZoom={true}
                    enableCenterFocus={false}
                    minScale={1}
                    maxScale={3}
                    positionY={0}
                    centerOn={{ x: 0, y: (this.props.imageSize.width / this.props.imageSize.height) >= (screenW / screenH) ? 0 : ((screenW / this.state.imageSize.width) * this.state.imageSize.height - screenH) / 2, scale: 1, duration: 500 }}
                    onClick={() => {
                        if (this.props.closeHandler) {
                            this.props.closeHandler()
                        }
                    }}
                >
                    <FastImage
                        source={{ uri: this.state.imageUrl,priority:FastImage.priority.high }}
                        style={{ width: screenW, height: (screenW / this.state.imageSize.width) * this.state.imageSize.height  }}
                        resizeMode={FastImage.resizeMode.cover}
                    />
                </ImagePanZoom>
            </View>
        )
    }
}

const styles = StyleSheet.create({
    container: {
        position: 'absolute',
        zIndex: 1001,
        width: '100%',
        height: '100%',
        backgroundColor: '#000'
    },
    ImageBox: {
        flex: 1,
    },
    img: {
        width: 750 * sREM,
        height: 562.5 * sREM,
        marginTop: 235 * sREM
    },
})